<template>
  <div>
    <h3>成绩等级 --- {{ score }}</h3>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80">良好</div>
    <div v-else-if="score>=60">及格</div>
    <div v-else>不及格</div>

    <h3>v-show演示</h3>
    <div v-show="score>=90">优秀</div>
    <!-- <div v-show="score>=80">良好</div> -->
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 条件渲染 根据不同的成绩在页面中渲染出等级

let score = ref(80)

// v-if else-if else 会动态的创建或销毁元素

</script>
<style scoped>
</style>